<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" label-width="90px">
            <el-form-item label="时间筛选：">
                <span class="label-left">加微日期</span>
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="基础信息：">
                <el-select v-model="queryParams.period" placeholder="周期" clearable style="width: 160px">
                    <el-option
                        v-for="dict in periodList"
                        :key="dict.id"
                        :label="dict.title"
                        :value="dict.id"
                    />
                </el-select>
                <el-select v-model="queryParams.status" placeholder="请选择数据状态" clearable style="width: 160px">
                    <el-option label="未冻结" value="1" />
                    <el-option label="已冻结" value="0" />
                </el-select>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row class="mb20">
            <!-- <el-button size="mini" @click="batchChange(1)">批量冻结</el-button>
            <el-button size="mini" @click="batchChange(0)">取消冻结</el-button> -->
            <el-button type="primary" size="mini" @click="checkoutExcel">数据下载</el-button>
        </el-row>
        <el-table v-loading="loading" :data="saleList" @selection-change="handleSelectionChange">
            <el-table-column label="一级媒体" align="center" prop="first_media" width="120" />
            <el-table-column label="加微日期" align="center" prop="wechat_date" width="120" />
            <el-table-column label="媒体账面消耗" align="center" prop="consumption_book" width="130" :show-overflow-tooltip="true" />
            <el-table-column label="账户余额（统计日期）" align="center" prop="account_balance" width="160" :show-overflow-tooltip="true" />
            <el-table-column label="媒体现金消耗" align="center" prop="consumption_cash" width="120" />
            <el-table-column label="加微人数" align="center" prop="wechat_num" width="100" :show-overflow-tooltip="true" />
            <el-table-column label="加微现金成本" align="center" prop="wechat_cash_cost" width="120" />
            <el-table-column label="周期" align="center" prop="period_title" width="90" :show-overflow-tooltip="true" />
            <!-- <el-table-column label="下单日期" align="center" prop="lunch_order_date" width="120" :show-overflow-tooltip="true" /> -->
            <!-- <el-table-column label="下单商品" align="center" prop="product_name"  :show-overflow-tooltip="true" /> -->
            <el-table-column label="下单数量" align="center" prop="product_num" width="100" :show-overflow-tooltip="true" />
            <el-table-column label="下单金额" align="center" prop="order_amount" width="100" :show-overflow-tooltip="true" />
            <el-table-column label="下单ROI" align="center" prop="lunch_order_ROI" width="120" :show-overflow-tooltip="true" />
            <el-table-column label="回款商品数" align="center" prop="checkout_product_num" width="110" :show-overflow-tooltip="true" />
            <el-table-column label="回款金额" align="center" prop="checkout_amount" width="100" :show-overflow-tooltip="true" />
            <el-table-column label="回款ROI" align="center" prop="checkout_ROI" :show-overflow-tooltip="true" />
            <el-table-column label="数据状态" align="center" prop="status_title"  :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" width="100px" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" v-if="scope.row.status == 1" @click="changeStatus([scope.row.id],1)">冻结</el-button>
                    <el-button size="mini" type="primary" v-else-if="scope.row.status == 0" @click="changeStatus([scope.row.id],0)">取消冻结</el-button>
                </template>
            </el-table-column>
            </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script>
import { getList, changeStatus, deleteRoi } from "@/api/financial/roi"
import { getPeriod } from "@/api/dict";

export default {
    data() {
        return {
            loading: true,	// 遮罩层
            periodList:[],
            queryParams: { 	// 查询参数
                page: 1,
                pageSize: 20,
            },
            dateRange: [],
            saleList:[],
            multiRows:[],
            total:0,
        };
    },
    created() {
        this.getPeriod()
        this.getList();
    },
    methods: {
        getPeriod(){
            getPeriod().then(res => {
                this.periodList = res.data
            })
        },
        getList() {
            this.loading = true;

            //加微时间处理
            this.dateRange = Array.isArray(this.dateRange) ? this.dateRange : [];
            this.queryParams.wechat_date_start = this.dateRange[0];
            this.queryParams.wechat_date_end = this.dateRange[1];

            getList(this.queryParams).then(res => {
                let data = res.data.data
                let stat = res.data.statistics
                let title = {wechat_date:'总计'}
                let sum = {...title, ...stat}
                data.unshift(sum)
                this.saleList = data
                this.total = res.data.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryParams");
            this.dateRange = []
            this.queryParams = {
                page: 1,
                pageSize: 20
            }
            this.handleQuery();
        },
        handleSelectionChange(rows){
            this.multiRows = rows
        },
        batchChange(type){
            const ids = this.multiRows.map(item => item.id)
            this.changeStatus(ids,type)
        },
        changeStatus(ids,type){
            const tips = type == 1 ? '冻结后数据将无法修改，请确认' : '取消冻结后数据将可修改，请确认'
            const params = {
                ids: ids,
                status: type
            }
            this.$modal.confirm(tips).then(function() {
                return  changeStatus(params)
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("操作成功");
            }).catch(() => {});
        },
        checkoutExcel() {
            this.download('financial/ROIOrder/exportExcel', {
                ...this.queryParams
            }, `ROI统计.xlsx`)
        },
    }
};
</script>

<style scoped>
  .label-left{display: inline-block;margin-right: 10px;}
  .label-last{display: inline-block;margin-left: 15px;margin-right: 5px;}
  .el-input,
  .el-select{margin-right: 20px;}
</style>